<template>
	<view class="marginbox">
		<!-- 宫位图片 -->
		<view class="box1" style="margin-top: -10px;">
			<image src="/static/img/pay_banner.png" mode="widthFix" style="width: 100%; height: auto;"></image>
		</view>


		<!-- 添加宫位图片 -->
		<view style="width: 94%; margin: -60px auto 0px; position: relative;">
			<view class="lajiaod" :class="{jiyu:showimg}">
				<image src="/static/img/jiyu@2x1.png" ></image>
			</view>
			<view class="lajiaod" :class="{biandong:showimg}" >
				<image src="/static/img/biandong@2x1.png"></image>
			</view>
			<view class="lajiaod" :class="{tupo:showimg}">
				<image src="/static/img/tupo@2x1.png"></image>
			</view>
			
			<!-- 上面三张图片无效 -->


			<!-- 添加宫位信息 -->


			<view class="listop ffbb" style="padding-top: 15px;">
				<view class="listop1 divop6 dinwei4">
					<view class="toph1 ffbb">
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>廉</span></span><span><span>贞</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>贪</span></span><span><span>狼</span></span>
							</view>
							<view class="yx-mt-5"><span
									style="background-color: var(--yxErrorColor); color: rgb(255, 255, 255);"><span>禄</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>天</span></span><span><span>巫</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>禄</span></span><span><span>存</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>天</span></span><span><span>姚</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>八</span></span><span><span>座</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>天</span></span><span><span>喜</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>孤</span></span><span><span>辰</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x fftt">
								<span><span>天</span></span><span><span>空</span></span>
							</view>
						</view>
						<view class="p2"></view>
						<view class="topp1z">丁<span><span>巳</span></span></view>
					</view>
					<view class="toph2">兄弟宫</view>
				</view>
				<view class="listop1 divop7 dinwei5">
					<view class="toph1 ffbb">
						<view class="liopdx">
							<view class="topp1x">
								<span><span>巨</span></span><span><span>门</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>右</span></span><span><span>弼</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>阴</span></span><span><span>煞</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>擎</span></span><span><span>羊</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>凤</span></span><span><span>阁</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>台</span></span><span><span>辅</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>飞</span></span><span><span>廉</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>寿</span></span>
							</view>
						</view>
						<view class="p2"></view>
						<view class="topp1z">戊<span><span>午</span></span></view>
					</view>
					<view class="toph2">命宫</view>
				</view>
				<view class="listop1 divop8 dinwei6">
					<view class="toph1 ffbb">
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>相</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>越</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>月</span></span>
							</view>
						</view>
						<view class="p2"></view>
						<view class="topp1z">己<span><span>未</span></span></view>
					</view>
					<view class="toph2">父母宫</view>
				</view>
				<view class="listop1 divop9 dinwei7">
					<view class="toph1 fftt">
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>同</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>梁</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>左</span></span><span><span>辅</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>龙</span></span><span><span>池</span></span>
							</view>
						</view>
						<view class="p2"></view>
						<view class="topp1z">庚<span><span>申</span></span></view>
					</view>
					<view class="toph2">福德宫</view>
				</view>
			</view>

			<!-- 第一行结束 -->



			<view class="listop ffbb" style="margin-top: 10px;">
				<view class="topliu">
					<view class="listop1 divop5 dinwei3">
						<view class="toph1 ffbb">
							<view class="liopdx">
								<view class="topp1x">
									<span><span>太</span></span><span><span>阴</span></span>
								</view>
								<view class="yx-mt-5"><span
										style="background-color: var(--yxErrorColor); color: rgb(255, 255, 255);"><span>权</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>文</span></span><span><span>曲</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>陀</span></span><span><span>罗</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>天</span></span><span><span>贵</span></span>
								</view>
							</view>
							<view class="p2"></view>
							<view class="topp1z">丙<span><span>辰</span></span></view>
						</view>
						<view class="toph2">夫妻宫</view>
					</view>
					<view class="listop1 divop4 dinwei2">
						<view class="toph1 ffbb">
							<view class="liopdx">
								<view class="topp1x">
									<span><span>天</span></span><span><span>府</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>天</span></span><span><span>官</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>天</span></span><span><span>福</span></span>
								</view>
							</view>
							<view class="p2"></view>
							<view class="topp1z">乙<span><span>卯</span></span></view>
						</view>
						<view class="toph2">子女宫</view>
					</view>
				</view>
				<view class="divop13">
					
					<view class="lisuitext" style="margin-top: 10px;">
						<view class="lisui textk1"><span><span>姓名:</span></span>{{userinfo.userName}}</view>
						<view class="lisui textk4"><span><span>类型:</span></span>天盘</view>
						<view class="lisui textk3"><span><span>出生:</span></span>{{userinfo.birthDateValue}}
						</view>
					</view>
					<view class="lisui-botton textk5">
						<span>
							<span style="color: rgb(248, 77, 44);">在寅</span>
						</span><span><span>身
								宫</span></span><span><span
								style="color: rgb(248, 77, 44);">在午</span></span><span><span>命
								宫</span></span>
					</view>
				</view>
				<view class="topliu">
					<view class="listop1 divop10 dinwei8">
						<view class="toph1 ffbb">
							<view class="liopdx">
								<view class="topp1x">
									<span><span>武</span></span><span><span>曲</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>七</span></span><span><span>杀</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>三</span></span><span><span>台</span></span>
								</view>
							</view>
							<view class="p2"></view>
							<view class="topp1z">辛<span><span>酉</span></span></view>
						</view>
						<view class="toph2">田宅宫</view>
					</view>
					<view class="listop1 divop11 dinwei9">
						<view class="toph1 ffbb">
							<view class="liopdx">
								<view class="topp1x">
									<span><span>太</span></span><span><span>阳</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>文</span></span><span><span>昌</span></span>
								</view>
								<view class="topp1x" style="padding-top: 15px;">
									<span><span>庙</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>铃</span></span><span><span>星</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>恩</span></span><span><span>光</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>天</span></span><span><span>虚</span></span>
								</view>
							</view>
							<view class="liopdx">
								<view class="topp1x">
									<span><span>天</span></span><span><span>才</span></span>
								</view>
							</view>
							<view class="p2"></view>
							<view class="topp1z">壬<span><span>戌</span></span></view>
						</view>
						<view class="toph2">事业宫</view>
					</view>
				</view>
			</view>

			<!-- 第二行结束 -->


			<view class="listop ffbb" style="margin-top: 10px;">
				<view class="listop1 divop3 dinwei1">
					<view class="toph1 ffbb">
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>哭</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>马</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>火</span></span><span><span>星</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>哭</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>封</span></span><span><span>诰</span></span>
							</view>
						</view>
						<view class="p2"></view>
						<view class="topp1z">甲<span><span>寅</span></span></view>
					</view>
					<view class="toph2">财帛宫</view>
				</view>
				<view class="listop1 divop2 dinwei12">
					<view class="toph1 ffbb">
						<view class="liopdx">
							<view class="topp1x">
								<span><span>紫</span></span><span><span>薇</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>破</span></span><span><span>军</span></span>
							</view>
							<view class="topp1x" style="padding-top: 15px;">
								<span><span>旺</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>使</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>刑</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>寡</span></span><span><span>宿</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>破</span></span><span><span>碎</span></span>
							</view>
						</view>
						<view class="p2"></view>
						<view class="topp1z">乙<span><span>丑</span></span></view>
					</view>
					<view class="toph2">疾厄宫</view>
				</view>
				<view class="listop1 divop1 dinwei11">
					<view class="toph1 ffbb">
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>机</span></span>
							</view>
							<view class="yx-mt-5"><span
									style="background-color: var(--yxErrorColor); color: rgb(255, 255, 255);"><span>忌</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>解</span></span><span><span>神</span></span>
							</view>
						</view>
						<view class="p2"></view>
						<view class="topp1z">甲<span><span>子</span></span></view>
					</view>
					<view class="toph2">迁移宫</view>
				</view>
				<view class="listop1 divop12 dinwei10">
					<view class="toph1 ffbb">
						<view class="liopdx">
							<view class="topp1x">
								<span><span>地</span></span><span><span>空</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>地</span></span><span><span>劫</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>天</span></span><span><span>殇</span></span>
							</view>
						</view>
						<view class="liopdx">
							<view class="topp1x">
								<span><span>红</span></span><span><span>鸾</span></span>
							</view>
						</view>
						<view class="p2"></view>
						<view class="topp1z">癸<span><span>亥</span></span></view>
					</view>
					<view class="toph2">交友宫</view>
				</view>
			</view>

			<!-- 第三行结束 -->


		</view>



		<view class="progress-container" v-show="!showResult">
			<!-- 进度条和标签 -->
			<block v-for="(label, index) in labels" :key="index" v-if="currentProgress==index">
				
				<view class="label">{{ index + 1 }}、{{ label }}</view>
				<view class="progress-bar">
					<view class="progress" :style="{ width: progressWidthsValue + '%' }">
					</view>
				</view>
				
			</block>
		</view>

		<!-- 分析结果 -->
		<view class="zhonjiand ffcc newShow" v-show="showResult">
			<view class="textyud">
				命盘显示，2024年你的感情、事业、财运会出现<text>重要变动</text>
			</view>
			<view class="bottond" @click="paySubmit">
				<image src="/static/img/pay_btn.png" style="height: 62px;"></image>
			</view>
		</view>
		
		
		
		
		<!-- 弹窗区域 开始-->
		<uni-popup ref="popup">
			<view class="pay payIn" :style="{ padding: '0px', zIndex: 2147483647 }">
				<!-- 结果信息 -->
				<view class="top fftt">
					<view class="left_pic">
						<image class="img imgno"
							:style="{ height: '260px', backgroundImage: 'url(/static/img/dashio.png)', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }">
						</image>
					</view>
					<view class="right_text">
						<view class="top_name item" :style="{ color: 'rgb(51, 51, 51)' }">测试的生辰详批</view>
						<view class="item">
							<text :style="{ fontWeight: 'bold', color: 'rgb(51, 51, 51)' }"><span>阳历：</span></text>
							<text :style="{ color: 'rgb(185, 0, 0)' }"><span>1988年06月15日</span></text>
						</view>
						<view class="item">
							<text :style="{ fontWeight: 'bold', color: 'rgb(51, 51, 51)' }"><span>先天格局：</span></text>
							<text :style="{ color: 'rgb(185, 0, 0)' }"><span>一生或有大权</span></text>
						</view>
						<view :style="{ color: 'rgb(51, 51, 51)', lineHeight: '22px' }" class="item">
							命盘显示，2024年你的感情、<br>事业、财运会出现<text
								:style="{ color: 'rgb(245, 159, 54)' }"><span>重要变动</span></text>
						</view>
					</view>
				</view>
				<!-- 支付金额 -->
				<view class="middle fftt">
					<view class="left_price">
						<view class="discount jieyuanjia">结缘价：￥39.90</view>
					</view>
					<view class="right_time">
						<view :style="{ color: 'rgb(51, 51, 51)' }">距优惠结束</view>
						<view class="overtime fftt">
							<uni-countdown :show-day="false" :hour="outTime.hour" :minute="outTime.minute"
								:second="outTime.minute" :filterShow="{}" color="#FFFFFF"
								background-color="#c92727"></uni-countdown>
						</view>
					</view>
				</view>
				<!-- 支付选项 -->
				<view class="bottom">
					<view class="wx_pay wx_select1 ffbb" @click="payWayChange('wx')">
						<view class="left_picd fftt">
							<image
								:style="{ backgroundImage: 'url(/static/img/wx.png)', backgroundPosition: '0% 0%', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }">
							</image>
							<text>微信支付</text>
						</view>
						<view class="wx_select" :class="{wx_selected:selected}"></view>
					</view>
					<view class="ali_pay ali_select1 ffbb" @click="payWayChange('zfb')">
						<view class="left_picd fftt">
							<image
								:style="{ backgroundImage: 'url(/static/img/zfb.png)', backgroundPosition: '0% 0%', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }">
							</image>
							<text>支付宝支付</text>
						</view>
						<view class="ali_select" :class="{ali_selected:!selected}"></view>
					</view>
				</view>
				<view class="pay_btn" @click="toPay">立即解锁内容</view>
				<view class="gaodu" :style="{ height: '10px' }"></view>
			</view>
		</uni-popup>
		<!-- 弹窗区域 结束-->

	</view>
</template>

<script>
import ZiWeiDouShuCalculator from "@/static/js/result"
	
	export default {
		data() {
			return {
				
				userinfo:{
					userName:"",
					birthDateValue:"",
					birthDate:"",
					selectedSex:"",
					dateType:"农历",
					birthdayInfo:{}
				},
				// 数据部分
				labels: [
					"正在输入生命体信息",
					"正在安命宫",
					"正在定紫微星",
					"正在计算天干四化",
					"正在生成报告"
				],
				progressWidths: [0, 0, 0, 0, 0],
				durations:[500, 500, 500, 500, 500],//// 定义每个进度条的完成时间
				progressWidthsValue: 0,
				currentProgress: 0,
				showResult: false,
				showimg:false,
				
				//支付倒计时
				outTime: {
					hour: 0,
					minute: 30,
					second: 0
				},
				//支付方式选择
				selected:true,
				//支付方式
				payWay:"wx"
				
			};
		},
		methods: {
			 //打开z支付弹窗弹窗
			 paySubmit() {
			 	this.$refs.popup.open('bottom')
			 },
			 //切换支付方式
			 payWayChange(type){
			 	if(type=='wx'){
			 		this.selected=true
			 		this.payWay='wx'
			 	}else{
			 		this.selected=false;
			 		this.payWay='zfb'
			 	}
			 },
			 //支付提交
			 toPay(){
			 	console.log("122333")
			 	uni.showToast({
			 		icon:'none',
			 		title:"支付方式为"+this.payWay
			 	})
			 },
			 
			updateProgress() {
				if (this.currentProgress < this.labels.length) {
					
					let time=this.durations[this.currentProgress] / 20
					
					let interval = setInterval(() => {
						if (this.progressWidths[this.currentProgress] <= 105) {
							this.progressWidths[this.currentProgress] += 1; //上线改为1
							this.progressWidthsValue = this.progressWidths[this.currentProgress];
						} else {
							clearInterval(interval);
							this.currentProgress++;
							this.progressWidthsValue = 0;
							if (this.currentProgress === this.labels.length) {
								this.showResult = true;
								this.showimg=true;
								// this.$nextTick(() => {
								//   setTimeout(() => {
								//     this.showResult = false;
								//   }, 3000);
								// });
							} else {
								this.updateProgress();
							}
						}
					}, time);
					
					
					
				}
			}
		},
		mounted() {
			this.updateProgress();
			let userinfo=JSON.parse(uni.getStorageSync("userinfo"))
			//这里拿到年龄和身份信息
			let birthdayInfo=userinfo.birthdayInfo;
			this.userinfo=userinfo;
			
			// date": "1989-12-05",
			//     "hour": 0,
			//     "year": 1989,
			//     "month": 12,
			//     "day": "05",
			let year=birthdayInfo.year;
			let month=birthdayInfo.month;
			let day=birthdayInfo.day;
			let hour=birthdayInfo.hour;
			let type=birthdayInfo.type;
			let userSex=userinfo.selectedSex;
			let userName=userinfo.userName;
			this.userName=userName;//姓名
			this.selectedSex=userSex;//性别
			this.birthDateValue=birthdayInfo.date//生日
			this.dateType=birthdayInfo.type=='lunar'?'农历':'公历'//生日
			this.birthdayInfo=birthdayInfo;
			
			 //type="lunar"//农历 solar//公历	
		
		// 这里执行计算
			var calculator = new ZiWeiDouShuCalculator();
			//var birthday = new Date(1988, 11, 7); // 2000 年 6 月 16 日（公历）
			var birthday = new Date(year, month, day); // 2000 年 6 月 16 日（公历）
			var sex = "male";
			if(userSex=='女') sex='female'
			// var hour = 10;
			var resultData = calculator.generateZiWeiData(birthday, sex, hour);
			console.log(resultData)
		},
		// 其他选项
	};
</script>

<style scoped>
	page {
		background: #1b0b40;
	}

	.marginbox {
		width: 100%;
		background: #1b0b40;
		margin: 0px auto;
	}

	.box1 {
		width: 100%;
		margin: 0px auto;
		min-height: 150px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.box1 image {}


	/* 头部 */

	.lajiaod {
		opacity: 0;
		height: 250px;
		width: 250px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -125px 0 0 -125px;
		z-index: 99;
	}
.lajiaod image{
    width: 100%;
    height: 100%;
}
	
/* 	动画: */
	.jiyu{
		opacity: 1;
		transition: opacity 1000ms , top 1000ms 1000ms, left 1000ms 1000ms, -webkit-transform 1000ms 1000ms, transform 1000ms 1000ms;
		transform-origin: 50% 50% 0px;
		top: 355px;
		left: 63.25px;
		transform: scale(0.12);
	}
	.biandong{
		opacity: 1;
     transition: opacity 1000ms , top 1000ms 1000ms, left 1000ms 1000ms, -webkit-transform 1000ms 1000ms, transform 1000ms 1000ms;
		transform-origin: 50% 50% 0px; 
		top: 248px; 
		left: 333.75px; 
		transform: scale(0.12);
	}
	.tupo{
		opacity: 1; 
		   transition: opacity 1000ms , top 1000ms 1000ms, left 1000ms 1000ms, -webkit-transform 1000ms 1000ms, transform 1000ms 1000ms;
		transform-origin: 50% 50% 0px;
		 top: 386.95px; 
		 left: 63.25px;
		transform: scale(0.12);
	}



	/* 进步条部分 */

	.progress-container {
		background-color: #191944;
		    border: 1px solid #e5bc65;
	   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .6);
		padding: 10px;
		border-radius: 15px;
		margin-top: 20px;
		width: 90%;
		margin: 50px auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		    color: #fff;
		    padding: 10px 0 15px;
			font-size: 14px;
	}

	.progress-bar {
		height: 5px;
		background-color: #f0f0f0;
		border-radius: 5px;
		margin-bottom: 10px;
		position: relative;
		width: 270px;
		/*   display: none; */
	}
	.progress {
		height: 100%;
		background-color: #29a7b6;
		border-radius: 5px;
		width: 0%;
		max-width: 270px;
		transition: width 0.25s ease-in-out;
	   background: linear-gradient(268deg, #2eb6c7, #127682);
	}
	.label {
		text-align: center;
		/*    display: none; */
		color: #fff;
		font-size: 14px;
		margin-bottom: 10px;
	}

	/* 底部 */
	.zhonjiand .textyud {
		color: #fff;
		font-size: 13px;
		padding-top: 25px;
	}

	.textyud {
		text-align: center;
		color: #fff;
		opacity: 0.7;
		font-size: 14px;
	}

	.zhonjiand .textyud text {
		color: #f59f36;
	}

	.bottond {
		z-index: 9999
	}

	.bottond image {
		display: block;
		width: 350px;
		height: 50px;
		margin: 20px auto;
		-webkit-animation: bamiao-data-v-63a34b41 2s linear infinite;
		animation: bamiao-data-v-63a34b41 2s linear infinite
	}

	.bottonds {
		z-index: 9999;
		position: fixed;
		bottom: 15px;
		left: 50%;
		margin-left: -175px
	}

	.bottonds image {
		display: block;
		width: 350px;
		height: 50px;
		margin: 20px auto 0;
		-webkit-animation: bamiao-data-v-63a34b41 2s linear infinite;
		animation: bamiao-data-v-63a34b41 2s linear infinite
	}

	@-webkit-keyframes bamiao-data-v-63a34b41 {
		0% {
			-webkit-transform: scale(.9);
			transform: scale(.9)
		}

		50% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		100% {
			-webkit-transform: scale(.9);
			transform: scale(.9)
		}
	}

	@keyframes bamiao-data-v-63a34b41 {
		0% {
			-webkit-transform: scale(.9);
			transform: scale(.9)
		}

		50% {
			-webkit-transform: scale(1);
			transform: scale(1)
		}

		100% {
			-webkit-transform: scale(.9);
			transform: scale(.9)
		}
	}


	/* commcss */

	@keyframes one-imgopacity-data-v-0c740c1e {
		0% {
			opacity: 0
		}

		20% {
			opacity: .2;
		}


		40% {
			opacity: .4;
		}

		60% {
			opacity: .5;
		}

		80% {
			opacity: .6;
		}

		90% {
			opacity: .7;
		}

		95% {
			opacity: .8;
		}

		100% {
			opacity: 1
		}
	}

	.listop1,
	.divop13 {
		opacity: 0;
	}

	.toph1 {
		padding: 5px 5px 0;
		font-size: 12px;
		align-items: flex-start;
		justify-content: left;
	}

	.divop6 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 8.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 8.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.listop1 .liopdx,
	.divop13 .liopdx {
		opacity: 0;
	}

	.toph1 .topp1x {
		display: flex;
		flex-direction: column;
	}


	.fftt {
		display: flex;
		align-items: center;
	}

	.topp1x span {
		color: #acb6dd;
	}

	.yx-mt-5 {
		margin-top: 5px;
	}

	.divop6 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 5.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 5.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.listop1 .toph2,
	.divop13 .toph2 {
		opacity: 0;
	}

	.toph2 {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #e5bc65;
		height: 26px;
		line-height: 26px;
		color: #191944;
		font-size: 12px;
		font-weight: 700;
		width: 40px;
		text-align: center;
		border-radius: 0 5px 0 4px;
	}

.toph1 {
    padding: 5px 5px 0;
    font-size: 12px;
    align-items: flex-start !important;
    justify-content: left !important;
}
	.toph1 .p2 {
		color: #f6c672;
		position: absolute;
		top: 50px;
		right: 5px;
	}

	.toph1 .topp1z {
		position: absolute;
		bottom: 2px;
		right: 5px;
		color: #cab78c;
		font-size: 15px;
		font-weight: 700;
	}

	.toph1 .topp1z span {
		color: #f84d2c;
	}

.topliu .listop1:last-child {
    margin-top: 10px;
}
	.listop .listop1 {
		overflow-x: auto;
		position: relative;
		width: 80px;
		height: 95px;
		border: 1px solid #f8d48b;
		border-radius: 5px;
		background-color: #191944;
	}

	.divop7 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 1.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 1.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}
	

	.listop1,
	.divop13 {
		opacity: 0;
	}

	.divop7 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 8.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 8.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.listop1 .liopdx,
	.divop13 .liopdx {
		opacity: 0;
	}

	.yx-mt-5 {
		margin-top: 5px;
	}

	.divop7 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 6s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 6s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop8 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 1.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 1.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop8 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 8.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 8.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop8 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 6.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 6.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop9 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 2s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 2s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop9 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 9s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 9s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop9 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 6.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 6.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop5 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 1s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 1s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop5 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 8.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 8.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop5 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 5.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 5.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop4 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s .75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s .75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop4 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 8s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 8s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop4 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 5.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 5.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop3 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s .5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s .5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop3 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 8.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 8.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop3 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s .25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s .25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop2 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 8.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 8.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop2 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 4.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 4.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop1 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop1 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 8.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 8.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop1 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 4.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 4.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop12 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 2.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 2.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop12 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 7.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 7.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop12 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 7.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 7.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

.topliu {
    min-height: 170px;
    width: 80px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
	.divop10 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 2.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 2.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop10 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 9.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 9.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop10 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 6.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 6.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop11 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 2.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 2.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop11 .liopdx {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 9.5s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 9.5s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop11 .toph2 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 7s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 7s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.divop13 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 3s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 3s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.listop1,
	.divop13 {
		opacity: 0;
	}

	.divop13 {
		border: 1px solid #f8d48b;
		background-color: #191944;
		flex: 1;
		margin: 0 10px;
		height: 201px;
		border-radius: 5px;
		font-size: 15px;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.lisuitext {
		padding-top: 10px;
	}

	.lisuitext .lisui {
		padding: 2px 0 12px;
		color: #f6c672;
		font-size: 15px;
	}

	.textk1 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 3.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 3.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.lisui,
	.lisui-botton {
		opacity: 0;
	}

	.lisuitext .lisui span {
		width: 35px;
		display: inline-block;
		color: #fff;
	}

	.lisuitext .lisui {
		padding: 2px 0 12px;
		color: #f6c672;
		font-size: 15px;
	}

	.textk4 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 4s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 4s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.lisui,
	.lisui-botton {
		opacity: 0;
	}

	.lisuitext .lisui {
		padding: 2px 0 12px;
		color: #f6c672;
		font-size: 15px;
	}

	.textk3 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 3.75s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 3.75s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.lisui,
	.lisui-botton {
		opacity: 0;
	}

	.textk5 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 4.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 4.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	.lisui,
	.lisui-botton {
		opacity: 0;
	}

	.lisui-botton {
		border-top: 1px solid #3d4d85;
		display: flex;
		justify-content: space-between;
	}

	.lisui-botton span {
		width: 15px;
		color: #f6c672;
	}

	.zhonjiand .textyud {
		color: #fff;
		font-size: 13px;
		padding-top: 25px;
	}

	.zhonjiand .textyud span {
		color: #f59f36;
	}

	/* 宫位信息 */

	.ffbb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	

	.listop .listop1 {
		overflow-x: auto;
		position: relative;
		width: 80px;
		height: 95px;
		border: 1px solid #f8d48b;
		border-radius: 5px;
		background-color: #191944;
	}

	.divop6 {
		-webkit-animation: one-imgopacity-data-v-0c740c1e .45s 1.25s linear;
		animation: one-imgopacity-data-v-0c740c1e .45s 1.25s linear;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

	/* 弹窗样式开始 */
	.pay {
	/* 	width: 1920px; */
		margin: 0 auto;
		position: relative;
		background-color: #fffbd8;
		border-radius: 10px 10px 0 0;
		z-index: 999999999;
		display: block;
	}
	
	.pay text {
		color: #333;
	}
	
	.pay .top {
		display: flex;
		border-bottom: 1px solid #efe67d;
		font-size: 15px;
		padding-top: 20px;
		justify-content: center;
	}
	
	
	.fftt {
		display: flex;
		align-items: center;
	}
	
	.pay .left_pic {
		width: 150px;
		position: relative;
		margin-right: 0px;
	}
	
	.wx_pay {
		margin: 15px 0;
	}
	
	
	
	.pay .left_picd {
		font-size: 17px;
		font-weight: 700;
	}
	
	.pay .left_picd image {
		width: 33px;
		height: 33px;
		margin-right: 10px;
	}
	
	.pay .bottom .wx_select {
		width: 15px;
		height: 15px;
		border: 1px solid #29a339;
		border-radius: 50%;
		box-shadow: 0 0 2px #29a339;
	}
	
	.pay .bottom .wx_selected {
		background-color: #29a339;
	}
	
	.pay .bottom .ali_selected {
		background-color: #1795d3;
	}
	
	.pay .bottom .ali_select {
		width: 15px;
		height: 15px;
		border: 1px solid #1795d3;
		border-radius: 50%;
		box-shadow: 0 0 2px #1795d3;
	}
	
	.pay .left_pic .imgno {
		width: 100%;
	}
	
	.pay .middle {
		display: flex;
		font-size: 17px;
		padding: 10px 15px;
		justify-content: space-between;
		border-bottom: 1px solid #efe67d;
	}
	
	
	
	.pay .middle .left_price .discount {
		color: #fff;
		background-color: #c92727;
		border-radius: 6px;
		line-height: 30px;
		padding: 0 7px;
		font-size: 16px;
	}
	
	.pay .bottom {
		padding: 5px 15px;
		color: #333;
		font-size: 15px;
	}
	
	.pay .pay_btn {
		background-color: #c92727;
		border-radius: 25px;
		width: 350px;
		margin: 0 auto 0;
		text-align: center;
		line-height: 50px;
		height: 50px;
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		text-align: center;
		margin-bottom: 10px;
	}
	
.pay .right_text .top_name {
    font-size: 17px;
    font-weight: 700;
}

.right_text .item {
    margin-bottom: 15px;

}
</style>